<template>
  <div>
    <h1 align="center" style="font-size: 30px">文章管理</h1>
    <el-card  v-for="(i,index) in blogs" :key="index" style="margin-bottom: 15px">
      <div>
        <h1>{{i.blogTitle}}</h1>
      </div>
      <el-divider></el-divider>
      <div class="text item">
        {{i.blogRemark}}
      </div>
      <h1>
        <el-button style="float: right;margin: 10px" type="danger" @click="setDelBlogId(i.blogId)">删除</el-button>
        <el-button style="float: right;margin: 10px" type="success" @click="editBlogById(i.blogId)">编辑</el-button>
      </h1>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
        <span>确定删除这篇博客吗</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteBlogById()">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
    <div style="height: 200px"></div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import background from '../../assets/css/background.css'
export default {
  name: 'BlogManagemen',
  data () {
    return {
      name: '',
      blogs: {},
      currentPage: 1,
      total: 0,
      pageSize: 5,
      dialogVisible: false,
      delBolgId: ''
    }
  },
  methods: {
    getBolgByUserId (currentPage) {
      this.name = JSON.parse(localStorage.getItem('userInfo')).name
      // /blogs/{page}/{size}/{username}
      this.$axios
        .get('/blogs/' + currentPage + '/' + this.pageSize + '/' + this.name)
        .then((res) => {
          this.blogs = res.data.data.blog
          console.log(this.blogs)
        })
    },
    deleteBlogById () {
      this.$axios
        .delete('/blog/delete/' + this.delBolgId)
        .then((res) => {
          if (res.data.code === 200) {
            this.getBolgByUserId(1)
            this.$message.success('删除博客成功')
          }
        }).catch(() => {
          this.$message.error('删除博客失败')
        })
      this.dialogVisible = false
    },
    editBlogById (id) {
      this.$router.push({
        name: 'BlogEdit',
        params: { blogId: id}
      })
    },
    setDelBlogId (id) {
      this.dialogVisible = true
      this.delBolgId = id
    }
  },
  created () {
    this.getBolgByUserId(1)
  }
}
</script>

<style scoped>

</style>
